<template>
  <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                  <span class="container-title-p">
                    订单中心
                    <i class="iconfont icon-jiantou"></i>
                  </span>
                  <span>交易记录</span>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">
            <el-input v-model="params.btm" clearable placeholder="筛选：BTM机器标识" class="handle-input mr10"  style="width:200px;" size="small"></el-input>
            <el-input v-model="params.phone" clearable placeholder="筛选：手机号" class="handle-input mr10" style="width:200px;" size="small"></el-input>
            <el-input v-model="params.code" clearable placeholder="筛选：交易订单号" class="handle-input mr10" style="width:200px;" size="small"></el-input>
            <el-input v-model="params.username" clearable placeholder="筛选：姓名搜索" class="handle-input mr10" style="width:200px;" size="small"></el-input>
            <!-- <el-select v-model="params.country" @focus="getCountry" placeholder="筛选国家" clearable  class="handle-select mr10" size="small">
                <el-option label="全部国家" value=""></el-option>
                <el-option v-for="(type_item,index) in countryCenter" :key="index" :label="type_item.chineseName" :value="type_item.id"></el-option>
            </el-select> -->
            <br>
            <el-select v-model="params.category" placeholder="筛选交易类型" @change='getList' clearable  class="handle-select mr10" size="small">
                <el-option label="所有类型" value=""></el-option>
                <el-option label="购买" value="0"></el-option>
                <el-option label="提现" value="1"></el-option>
                <el-option label="转入" value="2"></el-option>
                <el-option label="转出" value="3"></el-option>
                <el-option label="币币交易" value="4"></el-option>
                <!-- <el-option v-for="(type_item,index) in typeCenter" :key="index" :label="type_item.a_type_name" :value="type_item.a_tid"></el-option> -->
            </el-select>
            <el-select v-model="params.status" placeholder="筛选账单状态" clearable  class="handle-select mr10" size="small">
                <el-option label="全部状态" value=""></el-option>   
                <el-option label="待确认" value="0"></el-option>
                <el-option label="已完成" value="1"></el-option>
                <el-option label="已取消" value="2"></el-option>
                <el-option label="失败" value="3"></el-option>
                <el-option v-for="(type_item,index) in statusCenter" :key="index" :label="type_item.a_type_name" :value="type_item.a_tid"></el-option>
            </el-select>
            <!-- <el-date-picker class="handle-date" v-model="select_date" @change='showSelect' type="daterange" range-separator="至" start-placeholder="交易开始日期" end-placeholder="交易结束日期">
            </el-date-picker> -->
            <el-date-picker
            class="handle-date"
            @change='showSelect'
            v-model="select_date"
            type="datetimerange"
            :picker-options="pickerOptions2"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
            </el-date-picker>
            <el-button type="primary" icon="el-icon-search" class="handle-btn" @click="getList" size="small">搜索</el-button>
            <el-button type="default" icon="el-icon-upload" class="handle-btn handle-del mr10" @click="expendToExcel" size="small">导出到excel</el-button>
        </div>

        <el-table :data="orderCenter" border style="width: 99%" ref="multipleTable">
            <el-table-column prop='account.user.detail.name' label='姓名' align='center'>
            </el-table-column>
            <el-table-column  prop="title" label="交易名称" align="center"> 
            </el-table-column>
            <el-table-column  prop="account.user.phone" label="手机号" align="center"> 
            </el-table-column>
            <el-table-column  prop="code" label="交易订单号" align="center"> 
            </el-table-column>
            <el-table-column v-if="(params.category!='2'&&params.category!='3')" prop="btm.name" label="交易设备名称" align="center"> 
            </el-table-column>
            <el-table-column  prop="category" label="交易分类" align="center">
                <template slot-scope="scope">
                    {{scope.row.category==0?'购买':scope.row.category==1?'提现':scope.row.category==2?'转入':scope.row.category==3?"转出":'币币交易'}}
                    <br>
                    {{scope.row.account.virtualCurrency.code}}
                </template> 
            </el-table-column>

            <el-table-column label="交易金额" align="center">
                <template slot-scope="scope">
                    {{scope.row.category==1?scope.row.detail.toCode:scope.row.category==4?scope.row.detail.toCode:scope.row.detail.fromCode}}:{{scope.row.detail.price}}
                    <br>
                    {{scope.row.category==1?scope.row.detail.fromCode:scope.row.category==4?scope.row.detail.fromCode:scope.row.detail.toCode}}:{{scope.row.amount}}
                </template> 
            </el-table-column>

            <el-table-column  prop="createTime" label="交易时间" align="center"> 
            </el-table-column>

            <!-- <el-table-column  prop="a_type_name" label="交易设备号" align="center"> 
            </el-table-column> -->


            <el-table-column  prop="status" label="账单状态" align="center"> 
                <template slot-scope="scope">
                    {{scope.row.status==0?'待确认':scope.row.status==1?"已完成":scope.row.status==2?'已取消':'失败'}}
                </template>
            </el-table-column>
         
            <el-table-column label="操作" align="center">
                <template scope="scope">
                    <el-button size="small" type="success" @click="orderDetailPop(scope.row)">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog width="25%" title="订单详情" :visible.sync="refuseFlags" class="refuse-popup" append-to-body>
            <el-form label-width="100px">
                <el-form-item label="姓名：">
                 {{orderData.account.user.detail.name}}
                </el-form-item>
                <!-- <el-form-item label="交易名称：">
                 {{orderData.title}}
                </el-form-item> -->
                <el-form-item label="交易订单号：">
                 {{orderData.code}}
                </el-form-item>
                <el-form-item label="手机号：">
                 {{orderData.account.user.phone}}
                </el-form-item>
                <el-form-item label="交易分类：">
                 {{orderData.category==0?'购买':orderData.category==1?'提现':orderData.category==2?'转入':orderData.category==3?"转出":'币币交易'}} {{orderData.detail.fromCode}} 兑 {{orderData.detail.toCode}}
                </el-form-item>
                <el-form-item label="交易金额：" v-if='orderData.category==4'>
                 {{orderData.detail.fromCode}} {{orderData.amount}}
                </el-form-item>
                <el-form-item label="交易金额：" v-else>
                 {{orderData.detail.fromCode}} {{orderData.detail.price}}
                 <br>
                 {{orderData.detail.toCode}} {{orderData.amount}}
                </el-form-item>
                <el-form-item label='交易详情：'>
                    {{orderData.category==0?'购买':orderData.category==1?'提现':orderData.category==2?'转入':orderData.category==3?"转出":'币币交易'}}
                    <br>
                    交易数量 {{orderData.amount||0}}
                    <br>
                    手续费 {{orderData.fee}}
                    <br>
                    实际金额 {{orderData.total}}
                </el-form-item>
                <el-form-item label="交易时间：">
                 {{orderData.createTime}}
                </el-form-item>
                <el-form-item label="设备名称：">
                 {{orderData.btm&&orderData.btm.name}}
                </el-form-item>
                <el-form-item label="状态：">
                 {{orderData.status==0?'待确认':orderData.status==1?'已完成':orderData.status==2?'已取消':'失败'}}
                </el-form-item>

                <!-- <p class='title'>币种信息</p>
                <el-form-item label='持有人：'>
                    {{orderData.account.user.detail.username}}
                </el-form-item>
                <el-form-item label='币种：'>
                    <p class='icon'><img :src="orderData.account.virtualCurrency.icon" alt="icon" width='100%'></p>{{orderData.account.virtualCurrency.name}}
                </el-form-item> -->
                <!-- <el-form-item label="交易国家：">
                 测试数据
                </el-form-item> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
             <el-button type="success" @click="closeDetail" size='small'>返回</el-button>
            </div>
        </el-dialog>
        <div class="pagination">
            <el-pagination
                :page-size="params.size"
                @current-change ="handleCurrentChange"
                layout="prev, pager, next"
                :total="all_page">
            </el-pagination>
        </div>
        <loading v-if="loading" :tip="tip"></loading> 
  </div>
</template>
<script>
import {api,apiGet,apiPatch} from '@/api/index';
import loading from "@/components/common/loading.vue";
import { expendExcel } from "@/service/expendExcel";
export default {
    data(){
        return {
            pickerOptions2: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                    }
                }]
            },
            tip:'',
            loading:false,
            orderData:{
                account:{
                    user:{
                        detail:{},
                    },
                    virtualCurrency:{
                        code:'',
                    },
                },
                detail:{},
                btm:{},
            },
            params:{
                page:0,
                size:8,
                id:'',//账户交易日志标识
                userId:'',//用户标识-默认为当前用户
                status:"",//状态 交易状态{待确认=0, 已完成=1, 已取消=2, 失败=3}
                category:"",//分类 交易分类{购买=0, 提现=1, 转入=2, 转出=3, 币币交易=4}
                virtualCurrencyId:'',//虚拟币标识
                startTime:'',//开始时间
                endTime:'',//结束时间
                btm:'',//btm标识
                phone:'',
                country:'',
                code:'',//订单编号
                username:'',//姓名
            },
            refuseFlags:false,
            cur_page: 1,
            all_page: 1,
            select_machineno:'',
            select_tel:'',
            select_country:'',
            countryCenter:[],
            select_date:'',
            orderDatePicker: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            select_orderno:'',
            select_ordertype:'',
            typeCenter:[],
            select_orderstatus:'',
            statusCenter:[],
            orderCenter:[
                {
                    a_type_name:'模拟数据',
                    detail:{},
                    account:{
                        virtualCurrency:{},
                    }
                },
            ],
        }
    },
    methods:{
        getCountry(page=0){
        var params={
            page:page,
            size:10,
        }
        apiGet.country.getCountry(params).then(res=>{
            //console.log(res)
            this.countryCenter=res.content;
            // for(var i=0;i<4;i++){
            //   this.country.push(res.content)
            // }
        })
        },
        showSelect(){
            // //console.log(this.select_date);
            var pecker=[];
            if(this.select_date){
            this.select_date.map(item=>{
                var date = item; //日期对象
                var now = "";
                now = date.getFullYear()+"-"; //读英文就行了
                now = now + (date.getMonth()+1)+"-";//取月的时候取的是当前月-1如果想取当前月+1就可以了
                now = now + date.getDate()+" ";
                now = now + date.getHours()+":";
                now = now + date.getMinutes()+":";
                now = now + date.getSeconds()+"";
                // //console.log(now)
                pecker.push(now);
            })
            this.params.startTime=pecker[0];
            this.params.endTime=pecker[1];
            }else{
                this.params.startTime='';
                this.params.endTime='';
            }
        },
        handleCurrentChange(val) {
            this.cur_page = val
            // this.getData()
            this.params.page=val-1;
            this.getList();
        },
        getData(){

        },
        expendToExcel(){
            this.loading=true;
            expendExcel('http://118.31.10.184/api/account-transaction/export',this.params,['all']).then(res=>{
                this.loading=false;
                this.$message.success('即将开始下载');
            })
        },
        orderDetailPop(row){
            
            this.loading=true;
            this.tip='获取订单详情';
            apiGet.accountTransaction.accountTransaction({},true,row.id).then(res=>{
                this.orderData=res;  
                this.loading=false;
                this.refuseFlags = true;
            })
                                                                                                      
        },
        closeDetail(){
            this.refuseFlags = false 
        },
        getList(){
            this.loading=true;
            this.tip="获取交易记录";
            
            apiGet.accountTransaction.accountTransaction(this.params).then(res=>{
                //console.log(res);
                this.all_page=res.totalElements;
                this.orderCenter=res.content;
                this.loading=false;
            })
        },
        
    },
    components:{
        loading
    },
    mounted () {
        this.getList();
    }
}
</script>
<style scoped>
.refuse-popup .el-row{
    margin-bottom: 10px;
}
.handle-input{
    margin: 0 20px 10px 0;
}
.handle-select{
    width: 200px;
    margin: 0 20px 10px 0;
}
.handle-date{
    width:424px;
    height: 30px;   
    display:inline-block;
    vertical-align:top;
    margin:0 20px 10px 0;
}
.handle-btn{
    margin-right: 18px;
    vertical-align:top;
}
.title{
    padding: 2% 0;
    padding-left: 3%;
    background: #13ce66;
    color: #eee;
}
.icon{
    width: 20px;
    display: inline-block;
    vertical-align: sub;
    margin-right: 10px;
}
</style>
